<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统公告管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">公告标题</label>
									<div class="layui-input-inline">
										<input type="text" name="title" autocomplete="off" class="layui-input" placeholder="请输入公告标题">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">操作人</label>
									<div class="layui-input-inline">
										<input type="text" name="opername" autocomplete="off" class="layui-input" placeholder="请输入操作人">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">开始日期</label>
									<div class="layui-input-inline">
										<input type="text" name="startDate" id="startDate" autocomplete="off" class="layui-input" placeholder="请选择开始日期">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">结束时间</label>
									<div class="layui-input-inline">
										<input type="text" name="endDate" id="endDate" autocomplete="off" class="layui-input" placeholder="请选择结束日期">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-block" style="text-align: center;">
										<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">
											<i class="layui-icon layui-icon-search"></i>搜索</a>
										<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="data-reset-btn">
											<i class="layui-icon layui-icon-refresh"></i>重置</a>
									</div>
								</div>
							</div>
						</form>
					</div>
				</fieldset>

				<div>
					<table id="deptSelectTable"></table>
				</div>
				<!--表格开始-->
				<table class="layui-hide" id="noticeTable" lay-filter="noticeFilter"></table>
				<div style="display: none;" id="noticeToolBar">
					<a class="layui-btn layui-btn-sm btn-add btn-add-notice" lay-event="addNotice">
						<i class="layui-icon layui-icon-addition"></i>添加公告</a>
					<a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete btn-batchdelete" lay-event="batchdelete">
						<i class="layui-icon layui-icon-delete"></i>批量删除</a>
				</div>
				<div style="display: none;" id="noticeBar">
					<a class="layui-btn layui-btn-xs" lay-event="show">查看</a>
					<a class="layui-btn layui-btn-xs btn-update btn-update-notice" lay-event="update">编辑</a>
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete btn-delete btn-delete-notice" lay-event="delete">删除</a>
				</div>
				<!--表格结束-->

				<!--添加和修改的弹层开始-->
				<div id="addOrUpdateDiv" style="display: none; padding: 0.3125rem;">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFilter" id="dataFrm">
						<div class="layui-form-item">
							<label class="layui-form-label">标题</label>
							<div class="layui-input-block">
								<input type="hidden" name="id" />
								<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入公告标题" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">公告内容</label>
							<div class="layui-input-block">
								<div id="content" name="content" style="margin: 50px 0 50px 0">
								</div>
							</div>
						</div>

						<div class=class="layui-form-item" style="text-align: center;">
							<a class="layui-btn" lay-submit="" lay-filter="doSubmit" id="doSubmit">
								<i class="layui-icon layui-icon-release"></i>立即提交</a>
							<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="dataFrm-reset-btn">
								<i class="layui-icon layui-icon-refresh"></i>重置</a>
						</div>
					</form>
				</div>
			</div>
			<!--添加和修改的弹层结束-->

		</div>
		</div>

		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'laydate', 'layer', 'wangEditor'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					laydate = layui.laydate,
					layer = layui.layer,
					wangEditor = layui.wangEditor;

				// 渲染时间选择器		
				laydate.render({
					elem: '#startDate', //指定元素
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate', //指定元素
					type: 'datetime'
				});
				/**
				 * 加载 数据
				 */
				var tableIns = table.render({
					elem: '#noticeTable',
					url: api + 'notice/loadAllNotice',
					title: '系统公告数据表',
					toolbar: '#noticeToolBar',
					height: 'full-220',
					cols: [
						[{
								type: "checkbox",
								fixed: "left"
							},
							{
								field: 'title',
								title: '公告标题',
								align: "center"
							},
							{
								field: 'content',
								title: '公告内容',
								align: "center"
							},
							{
								field: 'createtime',
								title: '创建时间',
								sort: true,
								align: "center"
							},
							{
								title: '操作',
								templet: '#noticeBar',
								fixed: "right",
								align: "center"
							}
						]
					],
					done: function(data, curr, count) {
						//不是第一页时，如果当前返回的数据为0那么就返回上一页
						if (data.data.length === 0 && curr !== 1) {
							tableIns.reload({
								page: {
									curr: curr - 1
								}
							})
						}
					},
					page: true
				});

				/**
				 * 监听搜索操作
				 */
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();
					//执行搜索重载
					table.reload('noticeTable', {
						page: {
							curr: 1
						},
						url: api + 'notice/loadAllNotice?' + params
					});
					return false;
				});

				/**
				 * 监听重置操作
				 */
				form.on('submit(data-reset-btn)', function(data) {
					$("#searchFrm")[0].reset(); // 清空搜索信息框中的数据
					//执行搜索重载
					table.reload('noticeTable', {
						page: {
							curr: 1
						},
						url: api + 'notice/loadAllNotice'
					});
					return false;
				});

				form.on('submit(dataFrm-reset-btn)', function(data) {
					$("#dataFrm")[0].reset(); // 清空表格信息框中的数据
					editor.txt.html("");
					return false;
				});

				/**
				 * 监听表头的事件
				 */
				table.on('toolbar(noticeFilter)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'batchdelete':
							batchedelete();
							break;
						case 'addNotice':
							addNotice();
							break;

					};
				});

				/**
				 * 监听行数据的事件
				 */
				table.on('tool(noticeFilter)', function(obj) {
					var data = obj.data; // 获得当前行数据
					if (obj.event == 'delete') {
						layer.confirm('真的删除行么？', {
							icon: 3,
							title: '提示'
						}, function(index) {
							$.post(api + 'notice/deleteNotice', {
									id: data.id
								},
								function(res) {
									if (res.code == 200) {
										tableIns.reload();
									}
									layer.msg(res.msg);
								})
							layer.close(index);
						});
					} else if (obj.event == 'update') {
						updateNotice(data);
					} else if (obj.event == 'show') {
						showNotice(data);
					}
				});

				/**
				 * 打开公告的添加弹出层
				 */
				var mainIndex;
				var url; // 动态的url
				function addNotice() {
					mainIndex = layer.open({
						type: 1,
						title: '添加公告',
						area: ['800px', '600px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							url = api + "notice/addNotice";
							$("#dataFrm")[0].reset();
							editor.txt.html("");
						}
					})
				}

				/**
				 * 打开公告的编辑弹出层
				 */
				function updateNotice(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改公告',
						area: ['800px', '600px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							if (data.content == null) {
								editor.txt.html("");
							}
							id = data.id;
							title = data.title;
							url = api + "notice/updateNotice";
							// 装载数据表格 	
							form.val("dataFilter", data);
							// 设置富文本的内容
							editor.txt.html(data.content);
						}
					})
				}


				/**
				 * 提交数据
				 */
				form.on('submit(doSubmit)', function(data) {
					var params = $("#dataFrm").serialize();
					var content = editor.txt.html(); // 获取富文本中的内容
					params += "&content=" + content;
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				});


				/**
				 * 打开查看公告的弹层
				 */
				function showNotice(data) {
					var title = data.title,
						noticetime = data.createtime,
						content = data.content;
					opername = data.opername;
					var html =
						'<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #ebebed;color: #070707">\n' +
						'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' +
						title + '</h4></div>\n' +
						'<div style="font-size: 12px">' + content + '</div>\n' +
						'</div>\n';
					parent.layer.open({
						type: 1,
						title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' +
							'发布时间：' + noticetime + '	发布人：' + opername + '</span>',
						area: '800px;',
						shade: 0.8,
						btn: ['关闭'],
						btnAlign: 'c',
						moveType: 1,
						content: html,
					});
				}

				/**
				 * 批量删除
				 */
				function batchedelete() {
					var checkStatus = table.checkStatus('noticeTable'); //noticeTable 即为基础参数 id 对应的值
					var data = checkStatus.data;
					var length = checkStatus.data.length;
					console.log(checkStatus.data) //获取选中行的数据
					console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件

					if (length == 0) {
						layer.msg('请选择要删除的行数据');
					} else {
						layer.confirm('真的要删除选中的这些数据么?', {
							icon: 3,
							title: '提示'
						}, function(index) {
							var ids = "";
							$.each(data, function(index, item) {
								if (index == 0) {
									ids += "ids=" + item.id;
								} else {
									ids += "&ids=" + item.id;
								}
							});
							$.post(api + 'notice/batchDeleteNotice', ids,
								function(res) {
									if (res.code == 200) {
										tableIns.reload();
									}
									layer.msg(res.msg);
								})
							layer.close(index);
						});
					}
				}

				/**
				 * 初始化富文本
				 */
				var E = window.wangEditor;
				var editor = new E('#content');
				editor.customConfig.uploadImgServer = "../api/upload.json";
				editor.customConfig.uploadFileName = 'image';
				editor.customConfig.pasteFilterStyle = false;
				editor.customConfig.uploadImgMaxLength = 5;
				editor.customConfig.uploadImgHooks = {
					// 上传超时
					timeout: function(xhr, editor) {
						layer.msg('上传超时！')
					},
					// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
					customInsert: function(insertImg, result, editor) {
						console.log(result);
						if (result.code == 1) {
							var url = result.data.url;
							url.forEach(function(e) {
								insertImg(e);
							})
						} else {
							layer.msg(result.msg);
						}
					}
				};
				editor.customConfig.customAlert = function(info) {
					layer.msg(info);
				};
				editor.create();
			});
		</script>
		<script>

		</script>

	</body>
</html>
